<section  ng-app="user" class="right-content" ng-controller = "UserController" ng-init="isUpdated = 0">
    <div pic-loading></div>
    <table class="table table-bordered" ng-show="isShow" ng-model="isShow" ng-init="isShow = false">
        <tr>
            <td colspan="5">
                <div style="width:80%; float: left;" class="input-group">
                    <span><img ng-src="{{status}}"></span>
                    <input type="text" class="input-lg" ng-model="searchText.$" placeholder="Search..." style="margin-bottom: 0; width:300px;">
                </div>
                <div style="width:10%; float: right;">
                    <button class="btn btn-primary" data-toggle="modal" data-target="#createForm">&nbsp;ADD&nbsp;</button>
                </div>
            </td>
        </tr>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>E-mail</th>
            <th>Password</th>
            <th style="text-align: center;">Operate</th>
        </tr>
        <tr ng-repeat="item in items | filter:searchText  ">
            <th>{{item.id}}</th>
            <th><input type="text" ng-model="item.username" style="border:  none; background: #fff;"></th>
            <td><input type="text" ng-model="item.email" style="border:  none; background: #fff;"></td>
            <td><input type="text" ng-model="item.password" style="border:  none; background: #fff;"></td>
            <td style="text-align: center;">
                <button class="btn btn-warning" ng-click="edit(item)">Edit</button>
                <button class="btn btn-danger" ng-click="delete(item.id)">Delete</button>
            </td>
        </tr>
        <tr>
            <th colspan="5" style="text-align: right;">
        <div class="pagination" style="margin: 1px 0;">
            <ul>
                <li><a href="#">&laquo;</a></li>
                <li ng-repeat="item in items | filter:searchText | pageCount:pageSize" ng-class="getPageClass($index)"><a href="#" ng-click="goTo($index)">{{$index + 1}}</a></li>
                <li><a href="#">&raquo;</a></li>
            </ul>
        </div>
        </th>
        </tr>
    </table>
    <!-- Modal -->
    <div class="modal fade" id="createForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Add record</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="username">User Name</label>
                        <input type="text" class="form-control" id="username" placeholder="username" ng-model="username" ng-change="change()">
                    </div>
                    <div class="form-group">
                        <label for="email">User E-mail</label>
                        <input type="email" class="form-control" id="email" placeholder="huilee@shareweb.com" ng-model="email" ng-change="change()">
                    </div>
                    <div class="form-group">
                        <label for="password">User Password</label>
                        <input type="password" class="form-control" id="password" ng-model="password" ng-change="change()">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" ng-click="add()" id="SaveInfo">Save</button>
                </div>
            </div>
        </div>
    </div>
</section>
<?php echo CHtml::scriptFile('/js/angular.min.js'); ?>
<?php echo CHtml::scriptFile('/js/angular-resource.min.js'); ?>

<script>
//    angular.module('userServices', ['ngResource']).
//            factory('Users', function($resource) {
//                return $resource('/ng/list', {}, {
//                    query: {method: 'GET', isArray:false}
//                });
//            });

    var user = angular.module('user', []);
    user.directive('picLoading', function() {
        return {
            template: '<img src="/images/loading.gif" id="loading">'
        };
    });

    user.filter('page', function() {
        return function(items, index) {
            var result = [];
            if (angular.isArray(items) && angular.isNumber(index)) {
                if (items.length !== 0) {
                    result = items.slice(index);
                }
            }
            return result;
        };
    }).filter("pageCount", function() {
        return function(data, size) {
            if (angular.isArray(data)) {
                var result = [];
                for (var i = 0; i < Math.ceil(data.length / size); i++) {
                    result.push(i);
                }
                return result;
            } else {
                return data;
            }
        };
    });

    function UserController($scope, $http) {
        $scope.status = '/images/status.png';
        $scope.isUpdated = 0;
        $scope.currentPage = 0;
        $scope.pageSize = 100;
        $scope.pages = [];
        $http.get('/ng/list').success(function(result) {
            $scope.items = result;
            $scope.isShow = true;
            $('#loading').hide();

            for (var i = 0; i < Math.ceil($scope.items.length / $scope.pageSize); i++) {
                $scope.pages.push(i);
            }
        });

        $scope.add = function() {
            $("#SaveInfo").html("Loading...");
            $http.get('/ng/add', {
                params: {username: $scope.username, email: $scope.email, password: $scope.password}
            }).success(function(result) {
                if (result.msg === 'ok') {
                    $("#SaveInfo").html("Done");
                    $scope.isUpdated++;
                    $scope.clear();
                }
            });
        };

        $scope.edit = function(item) {
            $http.get('/ng/edit', {params: {id: item.id, username: item.username, email: item.email, password: item.password}
            }).success(function(result) {
                if (result.msg === 'ok') {
                    $scope.isUpdated++;
                }
            });
        };

        $scope.delete = function(id) {
            $http.get('/ng/delete', {params: {id: id}
            }).success(function(result) {
                if (result.msg === 'ok') {
                    $scope.isUpdated++;
                }
            });
        };

        $scope.goTo = function(index) {
            $scope.currentPage = index;
        };

        $scope.change = function() {
            $("#SaveInfo").html("Save");
        };

        $scope.clear = function() {
            $scope.username = "";
            $scope.email = "";
            $scope.password = "";
        };

        $scope.getPageClass = function(page) {
            return $scope.currentPage == page ? 'active' : "";
        };

        $scope.$watch('isUpdated', function() {
            $scope.pages = [];
            $http.get('/ng/list').success(function(result) {
                $scope.items = result;
                for (var i = 0; i < Math.ceil($scope.items.length / $scope.pageSize); i++) {
                    $scope.pages.push(i);
                }
            });
        }, false);
    }
</script>